<template>
  <svg>
    <use :xlink:href="symbolId" :class="fillClass" :fill="color" />
  </svg>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  color: {
    type: String,
  },
  fillClass: {
    type: String,
  },
});

const symbolId = computed(() => `#icon-${props.name}`);
</script>

<style scoped lang="scss"></style>
